<!-- 这个项目中暂未用到，属于测试vue文件 -->
<template>
  <div>
<!--    <div class="component-list" @dragstart="handleDragStart">
      <div
          v-for="(item, index) in componentList"
          :key="index"
          draggable
          class="list"
          :data-index="index"
      >
        <span v-if="item.icon.substr(0,2) === 'el'" :class="item.icon"></span>
        <span v-else class="iconfont  iconsize" :class="'icon-' + item.icon" ></span>
      </div>
    </div>-->

    <el-tree
        :data="treeData"
        node-key="id"
        draggable
        :props="defaultProps"
        :allow-drop="handleAllowDrop"
        @node-drag-start="handleNodeDragStart"
        :default-expand-all="true"
        style="width: 150px"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <el-image v-if="node.data.index >= 0" :src="imgsrc( node.data.sicon )" class="clssvg"   alt="svg display"  />
<!--          <div>{{node.label}}</div>-->
          <span>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>

  </div>
</template>

<script>
// @ is an alias to /src
import componentList from '@/custom-component/component-list'

import {drawTool} from "@/utils/drawdat/drawtool"

export default {
  name: 'DrawShapeList',
  components: {

  },
  data() {
    return {
      componentList,
      treeData: drawTool ,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  methods: {
    handleDragStart(e) {
      console.log( "target: ", e.target )
      // e.dataTransfer.setData('index', e.target.dataset.index)
      e.dataTransfer.setData('index', e.target.getAttribute('data-index'))
      // e.dataTransfer.setData('index', e.target.data("index"))
      console.log('index: ', e.target.dataset.index)
      console.log('index1: ', e.target.getAttribute('data-index'))
    },

    handleNodeDragStart(node, event) {
      console.log( "drag start:",   node.data.index  )
      console.log( "drag start:",   node  )
      // event.dataTransfer.setData('text/plain', node.data.index);
      event.dataTransfer.setData('index', node.data.index);
    },

    handleAllowDrop( draggingNode, dropNode, type ){
      return false
    },

    imgsrc( icon ){
      return "images/" + icon
    },

  },
}
</script>


<style scoped>
/*用于调整图标的大小*/
.iconsize {
  font-size: 25px;
}

.component-list {
  height: 65%;
  padding: 10px;
  /*display: grid;*/
  grid-gap: 10px 19px;
  grid-template-columns: repeat(auto-fill, 80px);
  grid-template-rows: repeat(auto-fill, 40px);
  .list {
    width: 80px;
    height: 40px;
    border: 1px solid #f5f2f2;
    cursor: grab;
    text-align: center;
    color: #333;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;

      &:active {
         cursor: grabbing;
       }

      .iconfont {
        margin-right: 4px;
        font-size: 20px;
      }

      .icon-wenben,
      .icon-biaoge {
        font-size: 18px;
      }

      .icon-tupian {
        font-size: 16px;
      }
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.clssvg{
  width: 20px;
  height: 20px;
}

</style>